<template>
  <div class="guide" @click.stop>
    <el-popover trigger="manual" :width="width" :visible-arrow="true" :value="visible">
      <div class="guide-container">
        <div class="title" v-if="title">{{ title }}</div>
        <div class="content" v-if="content">{{ content }}</div>
        <div class="footer" v-if="buttonContent">
          <el-button type="primary" size="mini" @click.stop="emits('hiddenGuide')">{{
            buttonContent
          }}</el-button>
        </div>
      </div>
      <template #reference>
        <slot name="reference"></slot>
      </template>
    </el-popover>
    <div class="mask" v-show="visible"></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  visible: boolean;
  title?: string;
  content: string;
  buttonContent: string;
  width?: number;
}
withDefaults(defineProps<Props>(), {
  visible: false,
  title: '',
  content: '',
  buttonContent: '',
  width: 290,
});
interface Emits {
  (e: 'hiddenGuide'): void;
}
const emits = defineEmits<Emits>();
</script>
<style lang="less">
.el-popper .popper__arrow::after {
  top: -1px !important;
  margin-left: -8px !important;
  border-width: 8px !important;
  border-top-width: 0 !important;
  border-bottom-color: #323232 !important;
}
.el-popover.el-popper {
  background: #323232;
  border: 0;
  top: 45px;
  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: -5px;
  //   left: calc(50% - 7px);
  //   width: 10px;
  //   height: 10px;
  //   background: #323232;
  //   transform: rotate(45deg);
  // }
}
</style>
<style scoped lang="less">
.mask {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 11;
}
.guide-container {
  width: 100%;
  height: 100%;
  padding: 4px;
  .title {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 20px;
    font-weight: 400;
  }
  .content {
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #bfbfbf;
    letter-spacing: 0;
    line-height: 20px;
    font-weight: 400;
    margin-top: 8px;
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
  }
}
</style>
